<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;/*去掉自带的8个像素外边距*/
            background-image: url("imgs/bg.jpg");
            background-size: cover; /*设置背景为封面*/
            text-align: center;
        }
        h1{
            font-size: 36px;
            color: #E6A23C;
            margin-bottom: 0;/*去掉下外边距*/
        }
        img{
            width: 400px;
            margin:5px;
        }
        h2{
            font-size: 30px;
            color: #E6A23C;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>瑞立保丰 | 养老院管理系统</h1>
    <img src="imgs/logo.png"  alt="">
    <h2>手机验证登录</h2>
    <el-card style="width: 500px;height: 250px;
    margin: 0 auto;background-color: rgba(255,255,255,0.3)">
        <!--label-width="55px" 让lable和文本框显示在一行之内-->
        <el-form label-width="80px" style="width: 400px;margin: 50px auto">
            <el-form-item label="手机号">
                <el-input style="width: 200px" type="text" v-model="user.phoneNum" placeholder="请输入手机号"></el-input>
                <el-button type="success" @click="code()">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码">
                <el-input type="text" v-model="user.code" placeholder="请输入获取的验证码"></el-input>
            </el-form-item>

            <el-form-item>

                <el-button type="warning" @click="phoneNumLogin()"
                           style="position:relative;right: 23px">登录</el-button>

            </el-form-item>

        </el-form>
    </el-card>
</div>
</body>
<!--引入axios和vue框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: 'body>div',
        data: function () {
            return {
                user:{phoneNum:"",code:""}
            }
        },
        methods:{
            phoneNumLogin(){
                axios.post("/reg",v.user).then(function (response){
                    if(response.data ==1){
                        v.$message("注册成功!");
                        location.href="login.html";
                    }else if(response.data==2){
                        v.$message("用户已存在");
                    }else {
                        v.$message("验证码错误!");
                    }
                })
            },
            code(){
                axios.get("/verificationCode?phoneNum="+v.user.phoneNum).then(function (){

                })
            }


        }
    })
</script>
</html>